@font-face {
  font-family: "Source Sans Pro";
  src: url("../fonts/SourceSansPro-Regular.otf.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

:root {
  --colors-grey: grey;
  --colors-blue: #007bc2;
  --colors-blue-dark: hsl(207, 69%, 35%);
  --colors-red: #c10000;
  --colors-white: white;
  --colors-bg: white;
  --colors-fg: #333;

  --font-face: "Source Sans Pro", Arial, Helvetica, sans-serif;
  --font-size: 14px;
  --font-mono-face: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --font-mono-size: 12px;

  --panel-roundness: 5px;
  --button-roundness: 5px;
  --container-roundness: calc(var(--panel-roundness) * 1.4);

  --shadow-color: 0deg 0% 56%;
  --shadow-elevation-low: 0.3px 0.4px 0.6px hsl(var(--shadow-color) / 0.34),
    0.5px 0.7px 1px -1.2px hsl(var(--shadow-color) / 0.34),
    1.2px 1.7px 2.3px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0.3px 0.4px 0.6px hsl(var(--shadow-color) / 0.36),
    1px 1.4px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
    2.6px 3.4px 4.8px -1.7px hsl(var(--shadow-color) / 0.36),
    6.2px 8.3px 11.7px -2.5px hsl(var(--shadow-color) / 0.36);
}

.shinylive-container {
  --pad: 2px;
  height: 100%;
  width: 100%;
  min-height: 100px;
  min-width: 400px;
  padding: var(--pad);
  border-radius: var(--container-roundness);
  background-color: #e6e6e6;
}

/* Settings for standalone app viewer (with no other components) */
.shinylive-container.viewer {
  --pad: 0;
  min-width: unset;
}

.shinylive-container > div {
  border-radius: var(--panel-roundness);
  background-color: var(--colors-bg);
  /* outline: 1px solid var(--colors-grey); */
}

.shinylive-example-selector {
  grid-area: exampleselector;
}
.shinylive-editor {
  grid-area: editor;
}
.shinylive-terminal {
  grid-area: terminal;
}
.shinylive-viewer {
  grid-area: viewer;
}

button {
  background-color: var(--colors-blue);
  color: var(--colors-white);
  font-family: var(--font-face);
  font-size: var(--font-size);
  border-style: solid;
  border-color: var(--colors-white);
  border-radius: var(--button-roundness);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}

button:disabled {
  cursor: default;
  background-color: #c8c8c8;
}

/* The following pertain to case where the shinylive-container is in editor-cell
mode. It doesn't fit exactly into this file, but this seems to be the best place
for it. */

.shinylive-container.editor-cell {
  padding: 0;
}

.shinylive-container.editor-cell .shinylive-editor {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.shinylive-container.editor-cell .shinylive-output-cell {
  border-top: 2px solid #eeeff2;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

.shinylive-container.editor-cell .shinylive-output-cell .rendered-html {
  padding: 2px 12px 3px 12px;
}

.shinylive-container.editor-cell .shinylive-output-cell pre.output-content {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  background-color: #eeeff2;
  font-size: 13px;
  line-height: 1.8;
  padding: 2px 12px 5px 12px;
  margin-bottom: 0;
  color: #666;
}

.shinylive-container.editor-cell .editor-container {
  padding: 0;
}

.shinylive-container.editor-cell .cm-scroller {
  padding: 12px 12px 4px 12px;
}
